<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 部门列表 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div>
                <el-input v-model="GetShow.name" placeholder="请输入内容" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="GetPermissions">搜索</el-button>
                <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="PermissionsDeletes">批量删除</el-button>
            </div>

            <div>
                <el-tree
                    style="width: 20%; float: left"
                    :data="tableData"
                    :default-expand-all="true"
                    :props="{ value: 'id', label: 'name', children: 'children' }"
                    @node-click="handleNodeClick"
                ></el-tree>
                <el-table
                    :data="tableDat"
                    border
                    class="table"
                    style="width: 80%; float: right"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column prop="userName" label="姓名" width="180"> </el-table-column>
                    <el-table-column prop="phone" label="手机号" width="180"> </el-table-column>
                    <el-table-column prop="emali" label="邮箱" width="180"> </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" style="clear: both">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="page.pageindex"
                        :page-size="page.pagesize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <div>
            <!-- 权限添加弹出框 -->
            <!-- <el-dialog title="添加" :visible.sync="AddHide" width="30%">
                <el-form ref="form" :model="form" label-width="120px">
                    <el-form-item label="部门名称">
                        <el-input v-model="form.Name"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="AddHide = false">取 消</el-button>
                    <el-button type="primary" @click="PermissionsAdd">确 定</el-button>
                </span>
            </el-dialog> -->
        </div>
        <div>
            <!-- 权限编辑弹出框 -->
            <!-- <el-dialog title="编辑" :visible.sync="UpdateHide" width="30%">
                <el-form ref="form" :model="formline" label-width="120px">
                    <el-form-item label="部门名称">
                        <el-input v-model="formline.Name"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="UpdateHide = false">取 消</el-button>
                    <el-button type="primary" @click="PermissionsUpdate">确 定</el-button>
                </span>
            </el-dialog> -->
        </div>
    </div>
</template>
<script>
import { DepartmentgetData, Departmentuserlist } from '@/api/depart.js/';
import { getUserList } from '@/api/users.js/';
export default {
    data() {
        return {
            //权限列表查询对象
            GetShow: {
                name: ''
            },
            //权限列表集合
            tableData: [],
            //是否弹出添加弹出框
            AddHide: false,
            //是否弹出编辑弹出框
            UpdateHide: false,
            //复选框
            multipleSelection: [],
            //权限添加的对象
            form: {
                Name: ''
            },
            //权限修改的对象
            formline: {
                Name: ''
            },
            tableDat: [],
            userdepartment: [],
            page: {
                pageindex: 1,
                pagesize: 2
            },
            pageTotal: 0
        };
    },
    created() {
        //部门列表显示
        this.GetPermissions();
        this.Departmentuser();
    },
    methods: {
        //树形列表
        handleNodeClick(row) {
            console.log(row);
            Departmentuserlist(row.id,this.page).then((res) => {
                this.tableDat = res;
                console.log(this.tableDat);
            });
        },
        //复选框值
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(this.multipleSelection);
        },
        //部门列表显示
        GetPermissions() {
            DepartmentgetData().then((res) => {
                this.tableData = res.data;
                console.log(this.tableData);
            });
        },
        //部门用户显示
        Departmentuser() {
            getUserList(this.page).then((res) => {
                this.tableDat = res.data.plist;
                this.pageTotal = res.data.recordCount;
                console.log(this.tableDat);
            });
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.page, 'pageindex', val);
            this.Departmentuser();
        },
        // //弹出权限添加from表单
        // AddHideTrue(row) {
        //     this.form = {};
        //     this.form.Permissions_Pid = row.Id;
        //     this.AddHide = true;
        // },
        // //部门添加
        // PermissionsAdd() {
        //     Postpermissions(this.form).then((res) => {
        //         if (res == 1) {
        //             //录入成功！
        //             this.$message.success('录入成功！');
        //             this.AddHide = false;
        //             this.GetPermissions();
        //         } else {
        //             this.$message({
        //                 showClose: true,
        //                 message: '录入失败！',
        //                 type: 'error'
        //             });
        //         }
        //     });
        // },
        // //查询部门单条数据
        // GetPermissionsById(row) {
        //     this.UpdateHide = true;
        //     let obj = {
        //         id: row.Id
        //     };
        //     getpermissionsById(obj).then((res) => {
        //         this.formline = res;
        //     });
        // },
        // //部门编辑
        // PermissionsUpdate() {
        //     UpdatepermissionsList(this.formline).then((res) => {
        //         if (res == 1) {
        //             //编辑成功！
        //             this.$message.success('编辑成功！');
        //             this.UpdateHide = false;
        //             this.GetPermissions();
        //         } else {
        //             this.$message({
        //                 showClose: true,
        //                 message: '编辑失败！',
        //                 type: 'error'
        //             });
        //         }
        //     });
        // },
        //部门单条删除
        PermissionsDelete(row) {
            console.log(row.Id);
        },
        //部门批量删除
        PermissionsDeletes() {
            let arr = [];
            this.multipleSelection.forEach((e) => {
                arr.push(e.Id);
            });
            console.log(arr);
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
